<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="app-name">欢迎使用</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <text class="icon">👤</text>
        <input
          type="text"
          v-model="formData.username"
          placeholder="请输入用户名/手机号"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="icon">🔒</text>
        <input
          :type="showPassword ? 'text' : 'password'"
          v-model="formData.password"
          placeholder="请输入密码"
          class="input"
        />
        <uni-icons
          :type="showPassword ? 'eye-slash' : 'eye'"
          size="20"
          color="#999"
          @click="togglePassword"
        ></uni-icons>
      </view>

      <view class="form-options">
        <label class="remember-me">
          <checkbox
            :checked="rememberMe"
            @change="toggleRemember"
            color="#007AFF"
          />
          <text>记住我</text>
        </label>
        <text class="forgot-password" @click="forgotPassword">忘记密码?</text>
      </view>

      <button class="login-btn" @click="handleLogin">登录</button>

      <view class="register-link">
        <text>还没有账号?</text>
        <text class="link" @click="goToRegister">立即注册</text>
      </view>

      <view class="other-login">
        <view class="divider">
          <text class="line"></text>
          <text class="divider-text">其他登录方式</text>
          <text class="line"></text>
        </view>

        <view class="login-methods">
          <view class="login-method" @click="wechatLogin">
            <uni-icons type="weixin" size="24" color="#07C160"></uni-icons>
            <text>微信</text>
          </view>
          <view class="login-method" @click="qqLogin">
            <uni-icons type="qq" size="24" color="#12B7F5"></uni-icons>
            <text>QQ</text>
          </view>
          <view class="login-method" @click="appleLogin">
            <uni-icons type="apple-filled" size="24" color="#000"></uni-icons>
            <text>Apple</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import request from "../../utils/intance";

// 表单数据
const formData = reactive({
  username: "",
  password: "",
});

// 是否显示密码
const showPassword = ref(false);

// 是否记住我
const rememberMe = ref(false);

// 切换密码显示状态
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

// 切换记住我状态
const toggleRemember = () => {
  rememberMe.value = !rememberMe.value;
};

// 处理登录
const handleLogin = async () => {
  // 登录逻辑
  console.log("登录信息：", formData);
  const res = await request({});
};

// 忘记密码
const forgotPassword = () => {
  console.log("忘记密码");
};

// 前往注册
const goToRegister = () => {
  console.log("前往注册");
};

// 微信登录
const wechatLogin = () => {
  console.log("微信登录");
};

// QQ登录
const qqLogin = () => {
  console.log("QQ登录");
};

// Apple登录
const appleLogin = () => {
  console.log("Apple登录");
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
  margin-bottom: 60rpx;
}

.logo {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 20rpx;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.login-form {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  padding: 20rpx 0;
  margin-bottom: 10rpx;
}

.input {
  flex: 1;
  margin-left: 20rpx;
  height: 60rpx;
  font-size: 28rpx;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0;
}

.remember-me {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.forgot-password {
  font-size: 24rpx;
  color: #007aff;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 30rpx;
  border: none;
}

.register-link {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.link {
  color: #007aff;
  margin-left: 10rpx;
}

.other-login {
  margin-top: 60rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin: 40rpx 0;
}

.line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}

.divider-text {
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #999;
}

.login-methods {
  display: flex;
  justify-content: space-around;
}

.login-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.login-method text {
  margin-top: 10rpx;
}
</style>
